<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif; /* 设置字体 */
      background-color: #f4f4f4; /* 设置背景颜色 */
      display: flex;
      justify-content: center; /* 水平居中 */
      height: 100vh;
      margin: 0;
    }
    .container {
      max-width: 2000px; /* 设置最大宽度 */
      width:1000px;
      background-color: #fff; /* 设置背景颜色 */
      padding: 40px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    h1 {
      color: #333; /* 设置标题颜色 */
      font-size: 24px; /* 设置标题字体大小 */
      margin-bottom: 20px; /* 设置标题下边距 */
    }
    input[type="text"] {
      width: calc(100% - 20px); /* 为了让内边距不占用输入框的宽度 */
      height: 300px;
      padding: 10px;
      margin-bottom: 20px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px; /* 设置圆角边框 */
      vertical-align: top; /* 设置默认文本垂直对齐方式为顶部 */
      text-align: left; /* 设置默认文本水平对齐方式为左对齐 */
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 4px; /* 设置圆角边框 */
      cursor: pointer;
    }
    #encode {
      background-color: #4CAF50; /* 设置按钮背景颜色 */
      color: white; /* 设置文字颜色 */
      margin-right: 10px;
    }
    #decode {
      background-color: #008CBA; /* 设置按钮背景颜色 */
      color: white; /* 设置文字颜色 */
    }
    textarea {
      width: 100%;
      height: 300px;
      padding: 10px;
      margin-top: 20px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px; /* 设置圆角边框 */
    }
    #copyButton {
        background-color: orange;
        color: white;
        float: right;
    }
  </style>
</head>
<body>
  <div class="container">
    <a href='/'>返回首页<a><br>
    <h1>Base64 编码和解码</h1><br>
    <textarea type="text" id="input" placeholder="输入要编码或解码的内容" /></textarea><br><br>
    <button id="encode">编码</button>
    <button id="decode">解码</button>
    <button id="copyButton">复制结果</button><br>
    <textarea id="output" readonly placeholder="结果会在这里展示"></textarea>
    
  </div>

  <script>
    const input = document.getElementById('input');
    const encodeBtn = document.getElementById('encode');
    const decodeBtn = document.getElementById('decode');
    const output = document.getElementById('output');
    const copyButton = document.getElementById('copyButton');

    encodeBtn.addEventListener('click', () => {
      const inputValue = input.value;
      const encodedValue = btoa(unescape(encodeURIComponent(inputValue)));
      output.value = encodedValue;
    });

    decodeBtn.addEventListener('click', () => {
      const inputValue = input.value;
      try {
        const decodedValue = decodeURIComponent(escape(atob(inputValue)));
        output.value = decodedValue;
      } catch (error) {
        output.value = "无法解码：输入的不是有效的Base64编码";
      }
    });
    
    copyButton.addEventListener('click', () => {
        output.select();
        document.execCommand('copy');
    });
  </script>
</body>
</html>
